<template>
    <div v-for="item in props.data" :key="item.id" class="shopt_body">
        <div class="shops_title">
            {{ item.name }}
        </div>
        <div class="shops_imgs">
            <swiper :modules="modules" :navigation="{ nextEl: '.swiper-button-next1', prevEl: '.swiper-button-prev1' }"
                class="mySwiper" loop>
                <swiper-slide v-for="imgObj  in item.images" :key="imgObj.id" class="bigImage" style="">
                    <ShopsImg :data="imgObj" @iClick="toImg" @aaa="handleA" />
                </swiper-slide>

                <div class="swiper-button-prev1">
                    <el-image style="width: 40px;"
                        src="https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/ico_arrow1.png" />
                </div>
                <!-- 自定义的右箭头 -->
                <div class="swiper-button-next1">
                    <el-image style="width: 40px;"
                        src="https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/ico_arrow2.png" />
                </div>
            </swiper>
        </div>
        <div class="btm">
            <swiper :navigation="true" :modules="modules" :slidesPerView="4" :spaceBetween="10" :freeMode="true"
                class="mySwiper" loop>
                <swiper-slide v-for="imgObj  in item.goods" :key="imgObj.id">
                    <el-image :src="imgObj.img" />
                </swiper-slide>
            </swiper>
        </div>
    </div>


</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import 'swiper/css/free-mode';
import { Navigation, FreeMode } from 'swiper/modules';

const modules = [Navigation, FreeMode]

import { onMounted, ref } from 'vue'
const props = defineProps({
    data: Array
})
const toImg = (obj) => {
    console.log(obj, '父组件');
}
const handleA = (a)=>{
    console.log('父组件','-----',a);
}


onMounted(() => {
    if (props.data.length) console.log(props.data);
})
</script>

<style scoped lang="scss">
.shopt_body {
    width: 580px;
    height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .shops_title {
        font-size: 19px;
        font-weight: bold;
    }

    .shops_imgs {
        width: 580px;
        height: 433px;

        // position: relative;
        & .swiper-button-prev1,
        .swiper-button-next1 {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            z-index: 10000;
        }

        & .bigImage {
            position: relative;
            height: 433px;


        }

        .swiper-button-prev1 {
            left: 10px;

        }

        .swiper-button-next1 {
            right: 10px;
        }
    }

    .btm {
        height: 100px;

        & .mySwiper {
            padding: 0px 30px;
        }

        & :deep(.swiper-button-prev),
        & :deep(.swiper-button-next) {
            width: 55px;
            height: 100px;
            border-radius: 0%;
            background-color: #000;
            top: 22px;
            background-color: #F5F5F5;
            color: #515151;
        }

        & :deep(.swiper-button-prev) {
            left: -0px;
        }

        & :deep(.swiper-button-next) {
            right: 0px;
        }

        & :deep(.swiper-button-prev::after),
        & :deep(.swiper-button-next::after) {
            font-size: 30px;
            color: #000;
        }
    }
}
</style>